<template>
	<view>
		<uni-byt-top-com title="单文件上传" :backShow="backShow"></uni-byt-top-com>
		<scroll-view scroll-y="true" :style="{height:scrollHeight+'px'}">
			<view class="flex-col">

				<view class="flex-col mt-14">
					<view class="flex-col my-14  mx-15">
						<text class="text-size-16">默认上传(双向绑定url)：</text>
						<text class="text-size-16 text-min-color">:url.sync="url1"</text>
					</view>
					<uni-byt-upload-img :url.sync="url1"></uni-byt-upload-img>
				</view>

				<view class="flex-col mt-14">
					<view class="flex-col my-14  mx-15">
						<text class="text-size-16">自定义类名：</text>
						<text class="text-size-16 text-min-color">className="red"</text>
						<text class="text-size-16 text-min-color">.red {
							background-color: red !important;
							}</text>
					</view>
					<uni-byt-upload-img className="red" :url.sync="url1"></uni-byt-upload-img>
				</view>

				<view class="flex-col mt-14">
					<view class="flex-col my-14  mx-15">
						<text class="text-size-16">自定义行内样式：</text>
						<text class="text-size-16 text-min-color">styleName="background-color: red !important;"</text>
					</view>
					<uni-byt-upload-img styleName="background-color: black !important;"
						:url.sync="url1"></uni-byt-upload-img>
				</view>

				<view class="flex-col mt-14">
					<view class="flex-col my-14  mx-15">
						<text class="text-size-16">上传文件类型：</text>
						<text class="text-size-16 text-min-color">uploadType="video"</text>
						<text class="text-size-16 text-min-color">默认images图片</text>
					</view>
					<uni-byt-upload-img uploadType="video" :url.sync="url1"></uni-byt-upload-img>
				</view>

				<view class="flex-col mt-14">
					<view class="flex-col my-14  mx-15">
						<text class="text-size-16">上传图片描述：</text>
						<text class="text-size-16 text-min-color">name="上传图片描述"</text>
					</view>
					<uni-byt-upload-img name="上传图片描述" :url.sync="url1"></uni-byt-upload-img>
				</view>

				<view class="flex-col mt-14">
					<view class="flex-col my-14  mx-15">
						<text class="text-size-16">上传图片类型(特殊图片识别)：</text>
						<text class="text-size-16 text-min-color"> type="id_front"</text>
						<text class="text-size-16 text-min-color">id_front：身份证人像面</text>
						<text class="text-size-16 text-min-color">id_back：身份证国徽面</text>
						<text class="text-size-16 text-min-color">business_license：营业执照</text>
					</view>
					<uni-byt-upload-img type="id_front" :url.sync="url1" @changeData="changeData"></uni-byt-upload-img>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getHeight
	} from "@/util"
	export default {
		data() {
			return {
				scrollHeight: getHeight(),
				backShow: false,
				url1: ''
			}
		},
		onLoad(play) {
			if (play.backShow) {
				if (play.backShow == '1') {
					this.backShow = true
				}
			}
		},
		methods: {
			changeData(data) {
				console.log("特殊类型图片ocr识别：", data);
			}
		}
	}
</script>

<style scoped>
	.red {
		background-color: red !important;
	}
</style>